<template>
  <div>
    <!-- class对象设置样式写法 -->
    <!-- 
      对象设置样式，都是对于已有样式进行开或关，不会新增样式  Object.defineproperty
      例：{a:true,b:true,c:true}
    -->
    <button @click="setTitleStyleFn">设置为标题样式</button>
    <br /><br />
    <div :class="{ title: setTitle }">我是标题</div>
    <br /><br />
    <div :class="classTitle">我是标题1111</div>
    <hr />
    <!-- class数组的设置样式写法 -->
    <!-- 
      数组设置样式，一般都会在原有样式的基础上，新增样式  vue提供变异方法 数组 队列方法 push unshift split shift pop
      例：[a,b] ==> [a,b,c]
     -->
    <div :class="['title']">我是标题---数组</div>
    <div :class="arrTitle">我是标题---数组</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设置样式是否生效，true生效，false不生效
      setTitle: false,
      classTitle: { title: false },
      arrTitle: ["title"],
    };
  },
  methods: {
    setTitleStyleFn() {
      this.setTitle = true;
      this.classTitle = { title: true };
      this.arrTitle.shift();
    },
  },
};
</script>

<style lang="scss">
.title {
  color: red;
  font-size: 18px;
}
</style>
